<template>
  <div class="meeting-management">
    <!-- 顶部标题区 -->
    <div class="header">
      <div>
        <h2>会议管理</h2>
        <div class="desc">管理和跟踪所有会议安排、状态和详情</div>
      </div>
      <div>
        <el-button style="background-color: #253963; color: #fff" @click="openDialog"
          >添加会议</el-button
        >
      </div>
    </div>

    <!-- 搜索筛选区 -->
    <div class="search-area">
      <el-form :inline="true" class="filter-bar">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="输入会议名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="filters.type"
            placeholder="会议类型"
            clearable
            style="width: 140px"
          >
            <el-option label="部门会议" value="部门会议" />
            <el-option label="项目会议" value="项目会议" />
            <el-option label="培训会议" value="培训会议" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="filters.status"
            placeholder="会议状态"
            clearable
            style="width: 140px"
          >
            <el-option label="未开始" value="未开始" />
            <el-option label="进行中" value="进行中" />
            <el-option label="已结束" value="已结束" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button style="background-color: #253963; color: #fff" @click="handleFilter"
            >筛选</el-button
          >
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 统计卡片区 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-title">总会议数</div>
        <div class="stat-value">248</div>
        <div class="stat-footer green">↑ 12% 较昨日</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">待开会议</div>
        <div class="stat-value">16</div>
        <div class="stat-footer orange">↓ 5% 较昨日</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">今日会议</div>
        <div class="stat-value">12</div>
        <div class="stat-footer green">↑ 8% 较昨日</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">已结束</div>
        <div class="stat-value">8</div>
        <div class="stat-footer red">↓ 3% 较昨日</div>
      </div>
    </div>

    <!-- 表格区域 -->

    <div class="table-container">
      <!-- PC端表格 -->
      <div class="desktop-table" v-if="!isMobileView">
        <el-table
          :data="pagedTableData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="40" />
          <el-table-column prop="name" label="会议名称" min-width="120" />
          <el-table-column prop="code" label="会议编号" min-width="100" />
          <el-table-column prop="room" label="会议室" min-width="100" />
          <el-table-column prop="type" label="类型" min-width="100" />
          <el-table-column prop="attendees" label="参会人数" min-width="100" />
          <el-table-column prop="status" label="会议状态" min-width="80">
            <template #default="{ row }">
              <el-tag
                :type="
                  row.status === '未开始'
                    ? 'info'
                    : row.status === '进行中'
                    ? 'success'
                    : 'warning'
                "
                disable-transitions
              >
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="最近更新" min-width="120" />
        </el-table>
      </div>

      <!-- 移动端卡片列表 -->
      <div class="mobile-cards" v-else>
        <div v-for="(item, index) in pagedTableData" :key="index" class="mobile-card">
          <div class="mobile-card-header">
            <span class="mobile-card-title">{{ item.name }}</span>
            <el-tag
              :type="
                item.status === '未开始'
                  ? 'info'
                  : item.status === '进行中'
                  ? 'success'
                  : 'warning'
              "
              size="small"
            >
              {{ item.status }}
            </el-tag>
          </div>
          <div class="mobile-card-body">
            <div class="mobile-card-item">
              <span class="mobile-card-label">会议编号:</span>
              <span class="mobile-card-value">{{ item.code }}</span>
            </div>
            <div class="mobile-card-item">
              <span class="mobile-card-label">会议室:</span>
              <span class="mobile-card-value">{{ item.room }}</span>
            </div>
            <div class="mobile-card-item">
              <span class="mobile-card-label">类型:</span>
              <span class="mobile-card-value">{{ item.type }}</span>
            </div>
            <div class="mobile-card-item">
              <span class="mobile-card-label">参会人数:</span>
              <span class="mobile-card-value">{{ item.attendees }}</span>
            </div>
            <div class="mobile-card-item">
              <span class="mobile-card-label">日期:</span>
              <span class="mobile-card-value">{{ item.date }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-table
      :data="pagedTableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
      v-loading="loading"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column
        prop="name"
        label="会议名称"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column prop="code" label="会议编号" min-width="100" />
      <el-table-column prop="room" label="会议室" min-width="100" />
      <el-table-column prop="type" label="类型" min-width="100" />
      <el-table-column prop="attendees" label="参会人数" min-width="100" />
      <el-table-column prop="status" label="会议状态" min-width="80">
        <template #default="{ row }">
          <el-tag
            :type="
              row.status === '未开始'
                ? 'info'
                : row.status === '进行中'
                ? 'success'
                : 'warning'
            "
            disable-transitions
          >
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="最近更新" min-width="120" />
    </el-table>
    >>>>>>> ffe68d75a12e87d5bcfd4544187671ed8455cd9c

    <!-- 添加会议弹框 -->
    <el-dialog
      v-model="dialogVisible"
      title="添加会议"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form ref="formRef" :model="meetingForm" :rules="rules" label-width="100px">
        <el-form-item label="会议名称" prop="name">
          <el-input v-model="meetingForm.name" placeholder="请输入会议名称" />
        </el-form-item>
        <el-form-item label="会议类型" prop="type">
          <el-select
            v-model="meetingForm.type"
            placeholder="请选择会议类型"
            style="width: 100%"
          >
            <el-option label="部门会议" value="部门会议" />
            <el-option label="项目会议" value="项目会议" />
            <el-option label="培训会议" value="培训会议" />
          </el-select>
        </el-form-item>
        <el-form-item label="会议室" prop="room">
          <el-select
            v-model="meetingForm.room"
            placeholder="请选择会议室"
            style="width: 100%"
          >
            <el-option label="会议室A" value="会议室A" />
            <el-option label="会议室B" value="会议室B" />
            <el-option label="会议室C" value="会议室C" />
            <el-option label="培训室" value="培训室" />
          </el-select>
        </el-form-item>
        <el-form-item label="会议时间" prop="time">
          <el-date-picker
            v-model="meetingForm.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="参会人员" prop="attendees">
          <el-select
            v-model="meetingForm.attendeesList"
            multiple
            placeholder="请选择参会人员"
            style="width: 100%"
          >
            <el-option label="张三" value="张三" />
            <el-option label="李四" value="李四" />
            <el-option label="王五" value="王五" />
            <el-option label="赵六" value="赵六" />
          </el-select>
        </el-form-item>
        <el-form-item label="会议描述" prop="description">
          <el-input
            v-model="meetingForm.description"
            type="textarea"
            rows="3"
            placeholder="请输入会议描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button style="background-color: #253963; color: #fff" @click="handleSubmit">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分页器 -->
    <div class="pagination-area">
      <span v-if="!isMobileView">Total {{ pagination.total }}</span>

      <span>共 {{ pagination.total }} 条</span>

      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[5, 10, 20]"
        :total="pagination.total"
        :layout="isMobileView ? 'prev, pager, next' : 'sizes, prev, pager, next'"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">

import { ref, computed, reactive, onMounted, onBeforeUnmount } from 'vue'


import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { gethui,addhui } from '@/utils/api'


// 检测是否为移动端视图
const windowWidth = ref(window.innerWidth)
const isMobileView = computed(() => windowWidth.value < 768)

// 监听窗口大小变化
const handleResize = () => {
  windowWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})

=======
// 定义会议数据类型
interface MeetingData {
  id: string
  name: string
  code: string
  room: string
  type: string
  attendees: string
  status: string
  date: string
}

// 定义API响应类型
interface ApiResponse<T> {
  code: number
  data: T
  message: string
}

// 初始化数据
const tableData = ref<MeetingData[]>([])

// 添加筛选后的数据
const filteredData = ref<MeetingData[]>([...tableData.value])

// 获取会议数据
const getData = async () => {
  try {
    loading.value = true
    const res = await gethui()
    if (Array.isArray(res)) {
      tableData.value = res
      filteredData.value = [...res]
      pagination.value.total = res.length
    }
  } catch (error) {
    console.error('获取会议数据失败:', error)
    ElMessage.error('获取会议数据失败')
  } finally {
    loading.value = false
  }
}

onBeforeMount(() => {
  getData()
})

// 分页配置
const pagination = ref({
  page: 1,
  pageSize: 5,
  total: 0
})

// 过滤器

const filters = ref({
  name: '',
  type: '',
  status: ''
})

// 更新筛选处理函数
const handleFilter = () => {
  filteredData.value = tableData.value.filter(item => {
    const nameMatch = !filters.value.name || item.name.includes(filters.value.name)
    const typeMatch = !filters.value.type || item.type === filters.value.type
    const statusMatch = !filters.value.status || item.status === filters.value.status
    return nameMatch && typeMatch && statusMatch
  })
  pagination.value.page = 1
  pagination.value.total = filteredData.value.length
}

// 重置筛选
const resetFilter = () => {
  filters.value.name = ''
  filters.value.type = ''
  filters.value.status = ''
  filteredData.value = [...tableData.value]
  pagination.value.page = 1
  pagination.value.total = tableData.value.length
}

// 更新分页数据计算逻辑
const pagedTableData = computed(() => {
  const start = (pagination.value.page - 1) * pagination.value.pageSize
  const end = start + pagination.value.pageSize
  return filteredData.value.slice(start, end)
})

const handlePageChange = (page: number) => {
  pagination.value.page = page
}

const handleSizeChange = (size: number) => {
  pagination.value.pageSize = size
  pagination.value.page = 1 // 切换每页条数时回到第一页
}

const handleSelectionChange = (val: any) => {
  console.log('选中的行:', val)
}

// 弹框相关
const dialogVisible = ref(false)
const formRef = ref<FormInstance>()

// 表单数据
const meetingForm = ref({
  name: '',
  type: '',
  room: '',
  time: [] as [Date, Date] | [],
  attendeesList: [] as string[],
  description: ''
})

// 表单校验规则
const rules = ref<FormRules>({
  name: [{ required: true, message: '请输入会议名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择会议类型', trigger: 'change' }],
  room: [{ required: true, message: '请选择会议室', trigger: 'change' }],
  time: [{ required: true, message: '请选择会议时间', trigger: 'change' }],
  attendeesList: [{ required: true, message: '请选择参会人员', trigger: 'change' }],
  description: [{ required: true, message: '请输入会议描述', trigger: 'blur' }]
})

// 打开添加会议弹框
const openDialog = () => {
  dialogVisible.value = true
  meetingForm.value = {
    name: '',
    type: '',
    room: '',
    time: [],
    attendeesList: [],
    description: ''
  }
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return

  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true
        const [startTime, endTime] = meetingForm.value.time || []
        if (!startTime || !endTime) {
          ElMessage.error('请选择会议时间')
          return
        }

        // 格式化会议数据
        const meetingData = {
          name: meetingForm.value.name,
          type: meetingForm.value.type,
          room: meetingForm.value.room,
          startTime: startTime.toISOString(),
          endTime: endTime.toISOString(),
          attendees: meetingForm.value.attendeesList.length,
          attendeesList: meetingForm.value.attendeesList,
          description: meetingForm.value.description,
          status: '未开始',
          date: new Date().toISOString()
        }

        const { data: res } = await addhui(meetingData)
        if (res) {
          ElMessage.success('添加会议成功')
          dialogVisible.value = false
          await getData() // 刷新数据
        } else {
          ElMessage.error('添加会议失败')
        }
      } catch (error) {
        console.error('添加会议失败:', error)
        ElMessage.error('添加会议失败，请重试')
      } finally {
        loading.value = false
      }
    }
  })
}

// 加载状态
const loading = ref(false)

<<<<<<< HEAD
// 重置筛选
const resetFilter = () => {
  filters.value.name = ''
  filters.value.type = ''
  filters.value.status = ''
  filteredData.value = [...tableData.value]
  pagination.value.page = 1
  pagination.value.total = tableData.value.length
}

// 更新分页数据计算逻辑
const pagedTableData = computed(() => {
  const start = (pagination.value.page - 1) * pagination.value.pageSize
  const end = start + pagination.value.pageSize
  return filteredData.value.slice(start, end)
})

// 更新分页配置
const pagination = ref({
  page: 1,
  pageSize: 5,
  total: tableData.value.length
})

const handlePageChange = (page: number) => {
  pagination.value.page = page
}

const handleSizeChange = (size: number) => {
  pagination.value.pageSize = size
  pagination.value.page = 1 // 切换每页条数时回到第一页
}

const handleSelectionChange = (val: any) => {
  console.log('选中的行:', val)
}
</script>

<style scoped>
.meeting-management {
  background: #f7f8fa;
  min-height: 100vh;
  padding: 32px 24px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
}

.header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.header .desc {
  color: #888;
  font-size: 14px;
  margin-top: 4px;
}

.filter-bar {
  background: #fff;
  padding: 18px;
  border-radius: 10px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stats-cards {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
}

.stat-card {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 18px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-title {
  color: #888;
  font-size: 14px;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #5a5fa6;
}

.stat-footer {
  font-size: 13px;
}

.stat-footer.green {
  color: #1bc47d;
}

.stat-footer.orange {
  color: #ff9900;
}

.stat-footer.red {
  color: #f56c6c;
}

.pagination-area {
  margin-top: 20px;
  padding: 10px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

:deep(.el-table) {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-tag) {
  border-radius: 4px;
}

:deep(.el-button) {
  border-radius: 6px;
}

.table-container {
  display: flex;
  gap: 18px;
}

.desktop-table {
  flex: 1;
}

.mobile-cards {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.mobile-card {
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: calc(50% - 9px);
}

.mobile-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.mobile-card-title {
  font-size: 18px;
  font-weight: bold;
}

.mobile-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-card-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-card-label {
  font-size: 14px;
  font-weight: bold;
}

.mobile-card-value {
  font-size: 14px;
}

/* 移动端适配样式 */
@media (max-width: 992px) {
  .stats-cards {
    flex-wrap: wrap;
  }

  .stat-card {
    flex: 0 0 calc(50% - 9px);
  }

  .mobile-card {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .meeting-management {
    padding: 16px;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .header h2 {
    font-size: 20px;
  }

  :deep(.el-button) {
    width: 100%;
  }

  .search-area {
    margin-bottom: 15px;
  }

  .filter-bar {
    padding: 12px;
  }

  :deep(.el-form--inline .el-form-item) {
    display: block;
    margin-right: 0;
    margin-bottom: 12px;
  }

  :deep(.el-input) {
    width: 100%;
  }

  :deep(.el-select) {
    width: 100% !important;
  }

  .stats-cards {
    gap: 12px;
  }

  .stat-card {
    padding: 12px 16px;
  }

  .stat-value {
    font-size: 24px;
  }

  .mobile-card-header {
    margin-bottom: 8px;
  }

  .mobile-card-title {
    font-size: 16px;
  }

  .pagination-area {
    flex-direction: column;
    align-items: center;
  }

  :deep(.el-dialog) {
    width: 90% !important;
  }
}

@media (max-width: 480px) {
  .meeting-management {
    padding: 12px;
  }

  .stat-card {
    flex: 0 0 100%;
  }

  .stat-value {
    font-size: 20px;
  }

  .stat-footer {
    font-size: 12px;
  }

  :deep(.el-pagination) {
    justify-content: center;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
